<template>
    <div>
        <div class="good-list">

            <div class="good-item" v-for='item in goodList' :key='item.id'  @click='goGoodsInfo(item.id)'>
                <img :src="item.img_url" alt="">
                <h3>{{item.title}}</h3>
                <div class="info">
                    <p class='price'>
                        <span class='now'>￥{{item.sell_price}}</span>
                        <span class='old'>￥{{item.market_price}}</span>
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩{{item.stock_quantity}}件</span>
                    </p>
                </div>
            </div>

             <mt-button type="danger" size="large" plain @click='getmore'>加载更多</mt-button>
        </div>
    </div>
</template>


<style lang='scss' scoped>
    .good-list{
        display: flex;
        flex-wrap:wrap;
        justify-content:space-between;
        padding: 7px;

        .good-item{
            width: 48%;
            padding: 2px;
            box-shadow:0 0 5px #ccc;
            margin: 4px 0;
              min-height: 293px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            img{
                width: 100%;
            }
            h3{
                font-size: 14px;
            }
            .info{
                background-color: #8567ff;
                border-radius: 4px;
                padding: 5px 8px;
                p{
                    color:#fff;
                    margin: 0;
                }
                .price{
                    .now{
                        color: red;
                        font-size: 18px;
                    }
                    .old{
                        font-size: 13px;
                        text-decoration: line-through;
                        margin: 10px;
                    }
                }
                .sell{
                    display: flex;
                    justify-content: space-between;
                    margin-top: 8px;
                }
            }
        }
    }
</style>


<script>
export default {
    data(){
        return {
            pageindex:1,
            goodList:[]
        }
    },
    created(){
        this.getGoodsList()
    },
    methods:{
        getGoodsList(){
            this.$http.get('api/getgoods?pageindex='+this.pageindex).then(res=>{
                console.log(res)
                if(res.body.status==0){
                    // this.goodList=res.body.message
                    this.goodList =  this.goodList.concat(res.body.message)
                    console.log(this.goodList)
                }
            })
        },
        goGoodsInfo(id){
            this.$router.push('./goodsinfo/'+id)
           
        },
        getmore(){
            this.pageindex++;
            this.getGoodsList()
        }
    }
}



</script>